:root {
    /* sizes */
    --size-compressed: 640px;
    --size-normal: 1024px;
    --size-advanced: 1274px;
    --size-full: 1524px;
    --size-over: 2024px;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background-main);
    font-family: 'Courier New', Courier, monospace;
}

.container {
    width: 100%;
    height: 100%;
    min-width: var(--size-compressed);
    background-color: var(--color-background-main);
}

@media (min-width: 1024px) {
    .container {
        width: var(--size-normal);
        margin: 0 auto;
    }
}

.main {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 4em;
    background-color: var(--color-background-main);
    border-bottom: 1px solid;
    border-color: var(--color-border-main);
}

.content {
    width: 100%;
    height: calc(100% - 4em - 1px);
    background-color: var(--color-background-main);
}

.error {
    font-weight: bolder;
    color: var(--color-font-error);
}

img {
    width: 100%;
}